<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* 定义了超链接属性的元素，并且未被访问过 */
            /*
                顺序: love-hate;
            */
            /*
                伪类选择器
            */
            a:link {
                color: red;
            }
            
            /* 被访问过的链接 */
            a:visited {
                color: cyan;
            }
            
            /* 鼠标悬浮在元素上方时的效果 */
            a:hover {
                color: purple;
            }
            
            /* 鼠标按下的效果 */
            a:active {
                color: blue;
            }
            
            div {
                width: 200px;
                height: 200px;
                background: red;
                transition: 2s;
                position: relative;

            }

            div:hover {
                background: blue;
                border-radius: 50%;
                transform: rotate(720deg);
            }

            /* 伪元素选择器 */
            /*p::before {
                content: "hello, world";
                font-size: 25px;
                display: block;
                width: 200px;
                height: 200px;
                background: red;
            }
*/
            p::after {
                content: "结尾";
                font-style: italic;
            }

            p::first-line {
                background: red;
            }

            p::first-letter {
                background: blue;
                color: yellow;
            }


        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">小网站</a>
        <div>
            <p>hello</p>
        </div>
        <p>
            h收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机收到了落实到附近沙隆达会计法是拉低房价阿是的法律框架路撒打飞机
        </p>
    </body>
</html>